{extend name="admin/plugin/layout" /}

{block name="content"}
<div class="container-fluid">
    <!-- 筛选和搜索区域 -->
    <div class="row mb-2">
        <div class="col-md-8">
            <!-- 快速筛选标签 -->
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <span class="text-muted me-2">筛选：</span>
                <button type="button" class="btn btn-soft-primary btn-sm active" data-filter="all"
                    onclick="quickFilter(this, 'all')">
                    全部
                </button>
                <button type="button" class="btn btn-soft-primary btn-sm" data-filter="plugin"
                    onclick="quickFilter(this, 'plugin')">
                    插件/应用
                </button>
                <button type="button" class="btn btn-soft-primary btn-sm" data-filter="template"
                    onclick="quickFilter(this, 'template')">
                    模板主题
                </button>
                <!-- <div class="vr mx-2"></div> -->
                <!-- <button type="button" class="btn btn-outline-success btn-sm" data-filter="free" onclick="quickFilter(this, 'free')">
                    <i class="fas fa-gift"></i> 免费
                </button>
                <button type="button" class="btn btn-outline-warning btn-sm" data-filter="paid" onclick="quickFilter(this, 'paid')">
                    <i class="fas fa-crown"></i> 付费
                </button> -->
            </div>
        </div>
        <div class="col-md-4">
            <!-- 搜索框 -->
            <div class="input-group">
                <input type="text" class="form-control" id="marketSearch" placeholder="搜索..."
                    onkeypress="handleMarketSearchKeypress(event)">
                <button class="input-group-text btn btn-primary" type="button" onclick="searchMarket()">
                    <i class="fas fa-search"></i>
                </button>
                <button class="btn btn-primary ms-2" type="button" onclick="clearMarketSearch()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 小分类筛选区域 -->
    <div class="row mb-3" id="categorySection" style="display: none;">
        <div class="col-12">
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <span class="text-muted me-2">分类：</span>
                <div id="categoryTags" class="d-flex flex-wrap gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm active" data-category=""
                        onclick="selectCategory(this, '')">
                        全部
                    </button>
                    <!-- 动态加载分类 -->
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover mb-0" id="marketTable">
            <thead class="table-light">
                <tr>
                    <th width="20%">名称</th>
                    <th width="35%">描述</th>
                    <th width="8%">版本</th>
                    <th width="10%">作者</th>
                    <th width="10%">分类</th>
                    <th width="6%">价格</th>
                    <th width="10%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div class="d-flex justify-content-center align-items-center">
                            <div class="spinner-border text-primary me-2" role="status">
                                <span class="visually-hidden">正在加载...</span>
                            </div>
                            <span>正在加载插件市场...</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 分页容器 -->
    <div class="d-flex justify-content-center mt-4">
        <nav aria-label="插件市场分页">
            <div id="marketPagination"></div>
        </nav>
    </div>


    <!-- 支付预览弹出层 -->
    <div class="modal" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentModalLabel">
                        <i class="fas fa-credit-card"></i> 立即支付
                    </h5>
                    <button type="button" class="btn-close" onclick="closePaymentModal()" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!-- 左侧：二维码区域 -->
                        <div class="">
                            <div class="text-center">
                                <!-- 支付方式选择 -->
                                <div class="mb-3">
                                    <div class="d-flex justify-content-center">
                                        <div class="payment-method-card active" data-method="alipay">
                                            <img src="/static/payment/icon_zfb.jpg" alt="支付宝" class="img-fluid"
                                                style="max-width: 60px; height: 20px;">
                                        </div>
                                    </div>
                                </div>

                                <!-- 二维码区域 -->
                                <div class="mb-3">
                                    <div id="paymentQR" class="d-flex justify-content-center">
                                        <div class="border rounded p-3"
                                            style="width: 220px; height: 220px; background: #f8f9fa;">
                                            <div class="d-flex align-items-center justify-content-center h-100">
                                                <div class="spinner-border text-primary" role="status">
                                                    <span class="visually-hidden">二维码加载中...</span>
                                                </div>
                                                <span class="ms-2">二维码加载中...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 右侧：订单信息区域 -->
                        <div class="">
                            <!-- 订单信息卡片 -->
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">
                                        <i class="fas fa-receipt"></i> 订单信息
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-2">
                                        <div class="col-4 text-muted">订单标题：</div>
                                        <div class="col-8" id="payOrderTitle">-</div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-4 text-muted">订单编号：</div>
                                        <div class="col-8"><code id="payOrderNo">-</code></div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-4 text-muted">支付方式：</div>
                                        <div class="col-8">
                                            <span class="badge badge-success-lighten p-1" id="payMethod">支付宝</span>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-4 text-muted">订单金额：</div>
                                        <div class="col-8">
                                            <span class="fs-5 fw-bold text-danger" id="payOrderPrice">¥ 0.00</span>
                                        </div>
                                    </div>
                                    <div class="row mb-0">
                                        <div class="col-4 text-muted">订单状态：</div>
                                        <div class="col-8">
                                            <span class="badge bg-warning" id="payOrderStatus">待支付</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 支付说明 -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">
                                        <i class="fas fa-info-circle"></i> 支付说明
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-0"><i
                                                class="fas fa-exclamation-triangle text-warning me-2"></i>不支持无理由退款</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/block}

    {block name="style"}
    {/block}

    {block name="script"}
    <script src="/static/js/jquery/jquery.min.js"></script>
    <script src="/static/js/jquery/jquery.qrcode.min.js"></script>
    <script src="/static/admin/plugins/plugin-market.js"></script>
    <script>
        // 初始化市场管理器
        window.marketManager = new MarketManager();
    </script>
    {/block}